#{extends 'master.html' /}
#{set title:"DigitalBand.ru - Создание товара" /}
#{set isCatalogActive:'active' /}
#{set 'moreStyles'}
<link type="text/css" rel="stylesheet" href="@{'/public/javascripts/plugins/jHtml/style/jHtmlArea.css'}"/>
<link rel="stylesheet" type="text/css" href="@{'/public/javascripts/plugins/jqueryui/css/jquery-ui.css'}"/>
#{/set}
#{set 'moreScripts'}
<script type="text/javascript" src="@{'/public/javascripts/plugins/jqueryui/js/jquery-ui.min.js'}"></script>
<script type="text/javascript" src="@{'/public/javascripts/plugins/jHtml/jHtmlArea-0.7.0.js'}"></script>
<script type="text/javascript" src="@{'/public/javascripts/plugins/jquery-validation/jquery.validate.min.js'}"></script>
<script type="text/javascript"
        src="@{'/public/javascripts/plugins/jquery-validation/localization/messages_ru.js'}"></script>
<script type="text/javascript" src="@{'/public/javascripts/create.js'}"></script>

<script type="text/javascript">
    // And now convert textarea #wysiwyg into Wysywyg editor.
    var brandNamesUrl = "@{ProductAdmin.brandList()}";

    $(function () {
        $("textarea").htmlarea(
                {
                    css:"@{'/public/javascripts/plugins/jHtml/style/jhtml.css'}"
                }
        );
        $("#title").bind("change", function () {
            getImages('@{InternetImage.getImages()}', {
                title:$("#title").val(),
                start:1
            });
        });
    });
    function getImages(url, data) {
        $.ajax({
            url:url,
            data:data,
            success:function (data) {
                $("#images").html(data);
                $(".pager a").bind("click", function() {
                    getImages($(this).attr("href"));
                    return false;
                });
                $(".brand-images input").bind("click", function(){
                    $("#imageurl").val($(this).attr("value"));
                });
            }
        });
    }
</script>
#{/set}
<div class="page-block">
    <form action="@{ProductAdmin.create()}" id="product_form" method="POST" enctype="multipart/form-data">
        <div class="form">
            <fieldset>
                <input type="hidden" name="p.categoryId" value="${categoryId}">

                <div class="fieldblock">
                    <label for="title">&{'Product.create.form.title'}</label>

                    <div class="textedit">
                        <input autofocus="autofocus" placeholder="&{'Product.create.form.title'}" class="required"
                               type="text" id="title" name="p.title" value=""/></div>
                </div>
                <div class="fieldblock">
                    <label for="shortDescription">&{'Product.create.form.shortDescription'}</label>

                    <div class="textedit">
                        <textarea placeholder="&{'Product.create.form.shortDescription'}" class="required"
                                  id="shortDescription" cols="5" rows="5" name="p.shortDescription"
                                  value=""></textarea>
                    </div>
                </div>
                <div class="fieldblock">
                    <label for="description">&{'Product.create.form.description'}</label>

                    <div class="textedit">
                        <textarea placeholder="&{'Product.create.form.description'}" class="required" id="description"
                                  rows="5" name="p.description"></textarea></div>
                </div>
                <div class="fieldblock">
                    <label for="price">&{'Product.create.form.price'}</label>

                    <div class="textedit">
                        <input placeholder="&{'Product.create.form.price'}" id="price" class="required number"
                               type="number" name="p.price" value=""/></div>
                </div>

                <div class="fieldblock">
                    <label for="brand">&{'Product.create.form.brand'}</label>

                    <div class="textedit">
                        <input placeholder="&{'Product.create.form.brand'}" class="required" id="brand" type="text"
                               name="p.brandName" value=""/></div>
                </div>
                <div class="fieldblock">
                    <label for="image">Фото</label>
                    <input type="file" name="image" id="image"/>
                </div>
                <div class="fieldblock">
                    <label for="imageurl">Ссылка на фото</label>
                    <input type="text" name="imageurl" id="imageurl"/>
                </div>
                <div class="fieldblock">
                    <div id="images"></div>
                </div>
            </fieldset>
        </div>
        <input type="submit" value="Сохранить"/>
    </form>
</div>

